/**
 * @description  明细列表
 * @author zls
 */
import React, { PureComponent } from 'react';
import { connect } from 'dva';
import moment from 'moment';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Row, Col, Spin, Tooltip } from 'antd';
import { SecondHeaderC, TableC, FirstHeaderC, ExportC } from '../../../comps';
import Style from './style.less';
import columnsDict from './columnsDict';
import { exportFile } from '../../../utils/commonFunc';
import accounting from 'accounting';

class detailList extends PureComponent {
  constructor() {
    super();
    this.state = {};
  }

  //获取columns
  getColumns = (title) => {
    let columns = [];
    columnsDict.map((item) => {
      if (item.title == title) {
        columns = item.columns;
      }
    });
    return columns;
  };
  changeStatus = (e) => {
    this.props.changeStatus(e);
  };
  //导出明细表格
  downLoad = () => {
    if (this.props.data?.length) {
      exportFile('gateway/maat-report/v1/cashManagementReport/detailExport', {
        time: this.props.time,
        portfolioCode: this.props.portfolioCodeList ? this.props.portfolioCodeList.join(',') : '',
      });
    }
  };
  render() {
    const { data } = this.props;
    const { cashManagementReportM } = this.props;
    const { securityBondTypeList = [] } = cashManagementReportM;

    const newColums = this.getColumns('allDetial').map((x) => {
      //资产类型
      if (x.key === 'type') {
        return {
          ...x,
          width: 70,
          render: (text) => securityBondTypeList?.filter((r) => r.code == text)[0]?.value || '--',
        };
      }
      //    证券简称  证券代码
      if (x.key === 'secuabbr' || x.key === 'tradingcode') {
        return {
          ...x,
          width: 70,
        };
      }
      //    估值净价、估值全价、市值全价
      if (x.key === 'netvaluation' || x.key === 'totalvaluation' || x.key === 'marketvalue') {
        return {
          ...x,
          type: 'money',
          width: 100,
        };
      }
      //持仓数量
      if (x.key === 'currentamount') {
        if (!this.props.showBtn) {
          //试算页面
          x.render = (text, record) => {
            if (text === null || text === undefined) {
              return '--';
            } else {
              if (isNaN(text)) {
                return text;
              } else {
                if (record.trialAmount) {
                  //试算变动公式
                  return (
                    <span>
                      {Number(text).toFixed(0)}
                      <span className={record.trialAmount > 0 ? 'plus' : 'reduce'}>
                        {record.trialAmount > 0 ? '+' : ''}
                        {Number(record.trialAmount).toFixed(0)}
                      </span>
                    </span>
                  );
                } else {
                  return accounting.formatNumber(Number(text), 0);
                }
              }
            }
          };
        }
        return {
          ...x,
          type: 'number',
          width: 80,
        };
      }
      //剩余期限
      if (x.key === 'residualday' || x.key === 'remainingday') {
        return {
          ...x,
          align: 'right',
        };
      }

      //到期日   下个行权日
      if (x.key === 'duedate' || x.key === 'exercisedate') {
        return {
          ...x,
          align: 'right',
          width: 90,
          render: (t) => (t ? moment(t).format('YYYY-MM-DD') : '--'),
        };
      }

      //权重
      if (x.key === 'weightcoefficient') {
        return {
          ...x,
          width: 70,
          align: 'right',
        };
      }
      return x;
    });
    return (
      <div className={Style.detaillist}>
        <div name={'xjgl-pdf'} style={{ marginBottom: '16px' }}>
          <FirstHeaderC
            title='明细列表'
            bottomHeight={false}
            arrowBtn={data?.length ? true : false}
            arrowBtnPosition={'right'}
            arrowBtnTxt={'明细'}
            showContent={this.props.showDetail}
            onExpendClick={this.changeStatus} //展开箭头按钮事件
            Left={
              this.props.showBtn ? (
                <div className={data?.length > 0 ? Style.detailBtn : Style.detailBtnGray} onClick={this.downLoad}>
                  导出excel
                </div>
              ) : (
                ''
              )
            }
          />
        </div>

        {this.props.showDetail && data?.length > 0 && (
          <div name={'xjgl-pdf'} isTable='true' style={{ marginBottom: '16px' }}>
            <TableC
              columns={newColums?.concat([{ dataIndex: 'konglie', title: '', key: 'konglie', render: () => '' }])}
              dataSource={data || []}
              hidePage={true}
              rowKey='key'
              rowClassName={(record) => {
                return record.isRealHold === '0' ? Style.redCls : 'table-row';
              }}
            ></TableC>
          </div>
        )}
      </div>
    );
  }
}
export default connect(({ cashManagementReportM, loading }) => ({
  cashManagementReportM,
  loading: loading.effects['cashManagementReportM/queryReport'],
}))(detailList);
